import * as React from 'react'
import { Tabs } from 'antd-mobile'
import { NavBar, Progress, Button, FlatList } from 'components'
import { formatPriceStr } from '../../methods'
import { post, NotBean } from '../../../../utils'
import './ReceiveHD.less'
export default class ReceiveHD extends React.Component<any, any> {

    public state = {
        tabs: [{
            title: '全部'
        }, {
            title: '未领完',
            field: 'unfinished'
        }, {
            title: '已领完',
            field: 'finished'
        }],
    }

    private index: number = 1
    private type: number

    public render(): JSX.Element {
        const { tabs } = this.state
        const { userHypoReceiveHD, userHypoReceiveHDAll, userHypoReceiveHDSold } = this.props
        return (
            <div className="receiveHD">
                <div className="receiveHD_filterBg"/>
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>领取恒豆</div>}
                    fixed={true}
                />
                <Tabs
                    tabs={tabs}
                    swipeable={false}
                    usePaged={false}
                    tabBarActiveTextColor="#fa0000"
                    onTabClick={this.handleTab}
                    prerenderingSiblingsNumber={0}
                    renderTab={(tab: any) => {
                        return tab.title
                    }}
                >
                    <div className="receiveHD_tab_content">
                        <FlatList
                            ListEmptyComponent={NotBean}
                            data={userHypoReceiveHDAll}
                            height="100%"
                            renderItem={((item: any, index: number) => {
                                return (
                                    <div className="receiveHD_tab_content_item" key={index}>
                                        <div className={`receiveHD_tab_content_bg bg_img${this.getBgClass(item)}`}>
                                            <div className="receiveHD_tab_content_text">
                                                <div className="receiveHD_tab_content_percent">
                                                    <div>
                                                        <div className="receiveHD_tab_content_percent_text">
                                                            <p>
                                                                {
                                                                    (parseInt(item.arrears_price, 10) / parseInt(item.surplus_price, 10) === 1) ? '已领完'
                                                                    : '已领'
                                                                }</p> 
                                                            <p>{((parseInt(item.arrears_price, 10) - parseInt(item.surplus_price, 10)) / parseInt(item.arrears_price, 10) * 100).toFixed(0)}%</p>  
                                                        </div>
                                                        <Progress 
                                                            className="receiveHD_tab_content_progress"
                                                            type="dashboard" 
                                                            value={((parseInt(item.arrears_price, 10) - parseInt(item.surplus_price, 10)) / parseInt(item.arrears_price, 10) * 100)} 
                                                            progColor="#fff" 
                                                            size={60}
                                                            bgColor="rgba(255,255,255,.4)"
                                                        />
                                                    </div>
                                                </div>
                                                <div className="receiveHD_tab_content_info">
                                                    <p>可领取恒豆数</p>
                                                    <p className="DINPro">
                                                    {
                                                        formatPriceStr(item.surplus_price.toString())
                                                    }
                                                    </p>
                                                    <p className="DINPro">债权人: {item.name}</p>
                                                </div>
                                                <div className="receiveHD_tab_content_btn">
                                                    {
                                                        (parseInt(item.surplus_price, 10) === 0) 
                                                        ? <Button className="receiveHD_tab_content_btn_btn">
                                                        已领完
                                                        </Button>
                                                        : <Button onClick={() => {this.goToUrl('/My/ExChangeBeans/' + item.id)}} className="receiveHD_tab_content_btn_btn">
                                                        立即领取
                                                        </Button>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                            onRefresh={this.getData}
                        />
                    </div>
                    <div className="receiveHD_tab_content">
                        <FlatList
                            ListEmptyComponent={NotBean}
                            data={userHypoReceiveHD}
                            height="100%"
                            renderItem={((item: any, index: number) => {
                                return (
                                    <div className="receiveHD_tab_content_item" key={index}>
                                        <div className={`receiveHD_tab_content_bg bg_img${this.getBgClass(item)}`}>
                                            <div className="receiveHD_tab_content_text">
                                                <div className="receiveHD_tab_content_percent">
                                                    <div>
                                                        <div className="receiveHD_tab_content_percent_text">
                                                            <p>
                                                                {
                                                                    (parseInt(item.arrears_price, 10) / parseInt(item.surplus_price, 10) === 1) ? '已领完'
                                                                    : '已领'
                                                                }</p> 
                                                            <p>{((parseInt(item.arrears_price, 10) - parseInt(item.surplus_price, 10)) / parseInt(item.arrears_price, 10) * 100).toFixed(0)}%</p>  
                                                        </div>
                                                        <Progress 
                                                            className="receiveHD_tab_content_progress"
                                                            type="dashboard" 
                                                            value={((parseInt(item.arrears_price, 10) - parseInt(item.surplus_price, 10)) / parseInt(item.arrears_price, 10) * 100)} 
                                                            progColor="#fff" 
                                                            size={60}
                                                            bgColor="rgba(255,255,255,.4)"
                                                        />
                                                    </div>
                                                </div>
                                                <div className="receiveHD_tab_content_info">
                                                    <p>可领取恒豆数</p>
                                                    <p className="DINPro">
                                                    {
                                                        formatPriceStr(item.surplus_price.toString())
                                                    }
                                                    </p>
                                                    <p className="DINPro">债权人: {item.name}</p>
                                                </div>
                                                <div className="receiveHD_tab_content_btn">
                                                    {
                                                        (parseInt(item.surplus_price, 10) === 0) 
                                                        ? <Button className="receiveHD_tab_content_btn_btn">
                                                        已领完
                                                        </Button>
                                                        : <Button onClick={() => {this.goToUrl('/My/ExChangeBeans/' + item.id)}} className="receiveHD_tab_content_btn_btn">
                                                        立即领取
                                                        </Button>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                            onRefresh={this.getData}
                        />
                    </div>
                    <div className="receiveHD_tab_content">
                        <FlatList
                            ListEmptyComponent={NotBean}
                            data={userHypoReceiveHDSold}
                            height="100%"
                            renderItem={((item: any, index: number) => {
                                return (
                                    <div className="receiveHD_tab_content_item" key={index}>
                                        <div className={`receiveHD_tab_content_bg bg_img${this.getBgClass(item)}`}>
                                            <div className="receiveHD_tab_content_text">
                                                <div className="receiveHD_tab_content_percent">
                                                    <div>
                                                        <div className="receiveHD_tab_content_percent_text">
                                                            <p>
                                                                {
                                                                    (parseInt(item.arrears_price, 10) / parseInt(item.surplus_price, 10) === 1) ? '已领完'
                                                                    : '已领'
                                                                }</p> 
                                                            <p>{((parseInt(item.arrears_price, 10) - parseInt(item.surplus_price, 10)) / parseInt(item.arrears_price, 10) * 100).toFixed(0)}%</p>  
                                                        </div>
                                                        <Progress 
                                                            className="receiveHD_tab_content_progress"
                                                            type="dashboard" 
                                                            value={((parseInt(item.arrears_price, 10) - parseInt(item.surplus_price, 10)) / parseInt(item.arrears_price, 10) * 100)} 
                                                            progColor="#fff" 
                                                            size={60}
                                                            bgColor="rgba(255,255,255,.4)"
                                                        />
                                                    </div>
                                                </div>
                                                <div className="receiveHD_tab_content_info">
                                                    <p>可领取恒豆数</p>
                                                    <p className="DINPro">
                                                    {
                                                        formatPriceStr(item.surplus_price.toString())
                                                    }
                                                    </p>
                                                    <p className="DINPro">债权人: {item.name}</p>
                                                </div>
                                                <div className="receiveHD_tab_content_btn">
                                                    {
                                                        (parseInt(item.surplus_price, 10) === 0) 
                                                        ? <Button className="receiveHD_tab_content_btn_btn">
                                                        已领完
                                                        </Button>
                                                        : <Button onClick={() => {this.goToUrl('/My/ExChangeBeans/' + item.id)}} className="receiveHD_tab_content_btn_btn">
                                                        立即领取
                                                        </Button>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })}
                            onRefresh={this.getData}
                        />
                    </div>
                </Tabs>
            </div>
        )
    }

    private getBgClass = (item: any) => {
        const ap =  parseInt(item.arrears_price, 10) // 总额
        const sp =  parseInt(item.surplus_price, 10) // 已使用
        const sy = ap - sp
        const percent = Number(((sy / ap) * 100).toFixed(2))
        if (percent >= 0 && percent < 25) {
            return 1
        } else if (percent >= 25 && percent < 50) {
            return 2
        } else if (percent >= 50 && percent < 75) {
            return 3
        } else if (percent >= 75 && percent < 100) {
            return 4
        } else {
            return 5
        }
    }
    private getData = (fashiLoad: () => void) => {
        const { userInfo, SET_MYUTILS_HYPOREVEIVEHD, userHypoReceiveHD, userHypoReceiveHDAll, userHypoReceiveHDSold } = this.props
        post('usersapi/userZqDrawList', {
            userId: userInfo.id,
            page: this.index,
            type: this.type
        }).then((data: any) => {
            if (this.index === 1) {
                SET_MYUTILS_HYPOREVEIVEHD(data.data, this.type)
                fashiLoad()
            }  else {
                if (data.data.length) {
                    let obj = {}
                    switch (this.type) {
                        case 1: obj = userHypoReceiveHD.concat(data.data); break
                        case 2: obj = userHypoReceiveHDSold.concat(data.data); break
                        default: obj = userHypoReceiveHDAll.concat(data.data); break
                    }
                    SET_MYUTILS_HYPOREVEIVEHD(obj, this.type)
                    fashiLoad()
                }
            }
            this.index++
        })
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
    private handleTab = (tab: any, index: number) => {
        this.index = 1
        this.type = index
    }
}